<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zn">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" th:src="@{/static/js/jquery-3.7.1.min.js}"></script>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        #conent {
            min-height: 100vh;
            background-color: #202123;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100vw;
            box-sizing: border-box;
        }

        .form-box {
            width: 600px;
            max-width: calc(100vw - 64px);
            box-sizing: border-box;
            background-color: #636465;
            border-radius: 12px;
            padding: 32px;
        }

        .form-title {
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 32px;
        }

        .form-group + .form-group {
            margin-top: 32px;
        }

        .invalid-feedback {
            color: #F51F29;
            margin-bottom: .25rem;
            display: none;
        }

        .form-group.error .invalid-feedback {
            display: block;
        }

        .form-label {
            color: #414854;
            font-weight: 550;
            margin-bottom: 12px;
            display: block;
        }

        .form-control-limit {
            height: 48px;
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
        }

        .form-control {
            width: 100%;
            display: block;
            height: 48px;
            background-image: none;
            border: none;
            box-sizing: border-box;
            padding: 0px 16px;
        }

        .form-control[type="submit"] {
            background: #4e46dc;
            color: #ffffff;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="conent">
    <form class="form-box" method="post">
        <h2 class="form-title">Login</h2>
        <div class="form-group">
            <label class="form-label" for="username">Username</label>
            <div class="form-control-limit">
                <input type="text" class="form-control" id="username" name="username" placeholder=""/>
            </div>
            <div class="invalid-feedback">请输入！</div>
        </div>
        <div class="form-group">
            <label class="form-label" for="username">Password</label>
            <div class="form-control-limit">
                <input type="password" class="form-control" id="password" name="password" placeholder=""/>
            </div>

            <div class="invalid-feedback">请输入！</div>
        </div>
        <div class="form-group">
            <div class="form-control-limit">
                <input class="form-control" onclick="toLogin()" value="提交"/>
            </div>
        </div>
    </form>
</div>
</body>
<script>

    function toLogin() {
        let username = document.getElementById("username").value
        let password = document.getElementById("password").value
        password = btoa(password)
        $.ajax({
            url: "/login",
            type: "POST",
            data: {
                "username": username,
                "password": password
            },
            success: function (data) {
                if (data.code === 200) {
                    // 登陆成功
                    document.cookie = 'token=' + data.data
                    location.href = "/";
                } else {
                    // 登陆失败
                    console.log(data)
                    alert("登陆失败：" + data.message)
                }

            }

        })

    }

</script>
</html>
